<template>
  <div class="paper-list">
    <!-- 筛选 -->
    <div class="paper-filter">
      <el-form
        :inline="true"
        label-position="right"
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-col :span="2" :offset="23">
            <el-form-item label="">
              <el-button type="primary" @click="$emit('changeType')" plain
                >创建考试</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="考试名称">
              <el-input
                v-model="query.exam_name"
                placeholder="考试名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学科名称">
              <el-select
                v-model="query.subject_id"
                placeholder="归属学科"
                clearable
                @clear="getExamList"
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目录名称">
              <el-select
                v-model="query.directory_id"
                placeholder="归属目录"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考试类型">
              <el-select
                v-model="query.exam_type"
                placeholder="请选择"
                clearable
              >
                <el-option label="阶段考核" :value="1"></el-option>
                <el-option label="综合考试" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="锁屏方式">
              <el-select
                v-model="query.difficulty"
                placeholder="请选择"
                clearable
              >
                <el-option label="不锁屏" :value="1"></el-option>
                <el-option label="锁屏" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input
                v-model="query.create_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="3">
            <el-button type="primary" plain size="small" 
              >搜索</el-button
            >
            <el-button size="small" >重置</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!--   列表信息  -->
      <el-table
        :data="list"
        v-loading=""
        border
        row-key="id"
        ref="tableList"
        @selection-change="multipleSelection = $event"
      >
        <el-table-column
          label="序号"
          width="60"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column label="试题信息">
          <template slot-scope="scope">
            <!-- 试题项目 -->
            <exam-item :question="scope.row" @iniData="getExamList"></exam-item>
          </template>
        </el-table-column>
        <el-table-column v-if="true" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <!-- 上架：审核通过且没上架才显示 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="推送班级"
              placement="top"
            >
              <el-button
                icon="el-icon-connection"
                type="warning"
                circle
                size="small"
                @click="bindClass(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                icon="el-icon-delete"
                type="danger"
                circle
                size="small"
                v-if="scope.row.exam_bind_class.length === 0"
                @click="delExam(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="班级列表"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div v-for="item in classList" :key="item.id">
        <el-radio v-model="radio" :label="item.id">{{
          item.class_name
        }}</el-radio>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bind">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTreeList,
  getExamList,
  getClassName,
  cancelBindClass,
  delExamList,
} from "@/api/exam/question";
import ExamItem from "./ExamItem.vue";
export default {
  name: "ExamList",
  components: {
    ExamItem,
  },
  data() {
    return {
      dialogVisible: false,
      radio: "",
      classList: [],
      query: {
        exam_name: "",
        subject_id: "",
        directory_id: "",
        exam_type: "",
        lock_screen: "",
        create_name: "",
        create_time: "",
        page: 1,
        limit: 10,
      },
      time: [],
      treeList: [],
      list: [],
    };
  },
  methods: {
    async getTreeList() {
      try {
        const res = await getTreeList();
        console.log(res);
        this.treeList = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    async getExamList() {
      const res = await getExamList(this.query);
      console.log(res);
      this.list = res.data.list;
    },
    async bindClass(row) {
      this.main_paper_id = row.main_paper_id;
      this.exam_id = row.id;
      const { data } = await getClassName({
        subject_id: row.subject_id,
        state: 1,
      });
      this.classList = data.list;
      this.dialogVisible = true;
    },
    async bind() {
      await cancelBindClass({
        class_id: this.radio,
        exam_id: this.exam_id,
        main_paper_id: this.main_paper_id,
      });
      this.getExamList();
      this.dialogVisible = false;
    },
    delExam(id) {
      this.$confirm("确定删除吗,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delExamList(id);
          this.getExamList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getExamList();
    this.getTreeList();
  },
  computed: {
    directoryList() {
      // 目录信息
      if (!this.query.subject_id) {
        return [];
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.query.directory_id = "";
        const result = this.treeList.find(
          (val) => val.id == this.query.subject_id
        );
        return result.children;
      }
    },
    createTime() {
      // 创建时间
      if (this.time.length) {
        return this.time.map((val) => val.getTime()).join(",");
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.paper-filter {
  background-color: #fff;
  padding: 16px;
}
.el-date-editor--daterange {
  width: 200px;
}
</style>
